import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import { HttpClient } from '@angular/common/http';
import { Options } from 'selenium-webdriver/chrome';
import { mapAbbrToTheme } from '@ant-design/icons-angular';

@Component({
  selector: 'app-linechart',
  templateUrl: './linechart.component.html',
  styleUrls: ['./linechart.component.css']
})
export class LinechartComponent implements OnInit {
  selectedIndustry= 'ALL';
  selectedSecond = "ALL";
  selectedThird = "ALL";

  linechartData: any;
  myChart: any;
  // selectedCity = 'Hangzhou';
  // provinceData = ['Zhejiang', 'Jiangsu'];
  // cityData: { [place: string]: string[] } = {
  //   Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  //   Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']
  // };

  constructor(private http: HttpClient) { }

  benchmark_data: any;
  category: any;
  industrydata: any;
  seconddata: any;
  thirddata: any;

  ngOnInit() {
    this.http.get("assets/benchmark_items.json").subscribe(e => {
      this.benchmark_data = e;
    });
    this.http.get("assets/benchmark_category.json").subscribe(e => {
      this.category=e;
      console.log(e);
      this.industrydata = this.category['Industry'];

      console.log("============");
      console.log(this.industrydata);

      this.selectedIndustry = "Environment";
      this.selectedSecond = "PM25";
      this.selectedThird = "Invensense";
      this.showlinkechart();
    });

    // this.selectedIndustry = "All";
    // this.showlinkechart();
  }

  ngAfterViewInit() {
    this.myChart = echarts.init(document.getElementById("linechart"));
    let option = {
      xAxis: {
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        // data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }]
    };
    this.myChart.setOption(option);
  }
  initEcharts(){
  }
  destroyEcharts(){
  }

  industryChange(value: string): void {
    console.log("--------------");
    console.log(value);
    console.log(this.category[value]);
    if (this.category[value] === undefined) {
      console.log("GOO")
      this.seconddata = [];
      this.thirddata = [];
      this.selectedSecond = undefined;
      this.selectedThird = undefined;
    } else {
      this.seconddata = this.category[value];
    }
  }
  secondChange(value: string): void {
    this.thirddata = this.category[value];
    if (this.category[value] === undefined){
      this.selectedThird = undefined;
    }
  }
  showlinkechart(){
    console.log(this.benchmark_data);
    this.myChart.clear();

    let s_benchmark_data = [];
    let benchmark_map : any;
    // if (this.selectedIndustry == "All") {
    //   this.benchmark_data.forEach(element => {
    //     s_benchmark_data.push(element['credit_trace']);
    //   });
    // } else if (this.selectedSecond == "All") {
    //     let showseconds = this.category[this.selectedIndustry];
    //     this.benchmark_data.forEach(element => {
    //       showseconds.forEach(e => {
    //         if (element['measurement'] == e) {
    //           s_benchmark_data.push(element['credit_trace']);
    //         }
    //       })
    //   })
    // } else 
    if (this.selectedThird == "All") {
      let showthird = this.category[this.selectedSecond];
        this.benchmark_data.forEach(element => {
          showthird.forEach(e => {
            if (element['measurement'] == this.selectedSecond
            && element['industry'] == this.selectedIndustry) {
              s_benchmark_data.push(element);
            }
          })
      })
    } else {
      this.benchmark_data.forEach(element => {
        if (element['industry'] == this.selectedIndustry 
        && element['measurement'] == this.selectedSecond 
        && element['vendor'] == this.selectedThird) {
          s_benchmark_data.push(element);
        }
      })
    }

    
    //   if (a['industry'] == "Environment"
    //   && a['vendor'] == "Avago"
    //   && a['measurement'] == "Temperature"){
    //     return a['credit_trace']
    //     // console.log(a['credit_trace']);
    //     // this.myChart.setOption(option);
    //   }
    // });    
    let option = {
      backgroundColor: '#000000',
      xAxis: {
        name: 'days',
        nameTextStyle:{
          color:'#ffffff',
            fontSize:16
        },axisLabel :{
          textStyle:{
            color:'#ffffff',
          }
         
        },
        type: 'category',
        data: []
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      legend: {
        textStyle:{
          fontSize: 18,//字体大小
          color: '#ffffff'//字体颜色
      },
        data:[]
    },
      yAxis: {
        name: 'Credits',
        nameTextStyle:{
          color:'#ffffff',
          fontSize:16
        },
        axisLabel :{
          textStyle:{
            color:'#ffffff',
          }
         
        },
        type: 'value'
      },
      series: []
      // series: [{
      //   // data: [820, 932, 901, 934, 1290, 1330, 1320],
      //   data: [],
      //   type: 'line',
      //   smooth: true
      // }]
    };
    // option.series[0].data = s_benchmark_data;
    let series = [];
    s_benchmark_data.forEach(element => {
      series.push(
        {
          name:element['vendor'],
          symbol: "none",
          data: element['credit_trace'],
          type: 'line',
          smooth: true
        }
      )
    });
    
    s_benchmark_data.forEach(e => {
      option.legend.data.push(e['vendor']);
    });
    console.log(option.legend.data);

    for (let i=0; i<s_benchmark_data[0]['credit_trace'].length; i++) {
      option.xAxis.data.push(i*10);
    }
    option.series = series;
    this.myChart.setOption(option);
  }
}
